<template>
  <div class="wrap-wh">
    <div class="detail-wrap">
      <div class="qs-header">
        <span>{{ typeWord }}</span> <span>剩余<span class="blue-color">{{ timer.seconds }}</span>秒【下一题】</span>
      </div>
      <div v-for="(item,index) in questionList" :key="index" style="padding-left: 80px;padding-right: 80px">
        <div v-if="index===now">
          <h2 class="topic-title"> 共{{ index + 1 }}/{{ questionList.length }}题
          </h2>
          <h3 class="topic-content">{{ index + 1 }}. {{ item.qs_content }}<span>（{{ item.qs_type }}）</span></h3>
          <div v-if="item.qs_type === '单选题'">
            <!--            {{ ruleForm[index] === item.qs_right }}-->
            <el-radio-group v-model="ruleForm[index]">
              <el-radio label="a" class="topic-option" v-if="item.optiona">a. {{ item.optiona }}</el-radio>
              <el-radio label="b" class="topic-option" v-if="item.optionb">b. {{ item.optionb }}</el-radio>
              <el-radio label="c" class="topic-option" v-if="item.optionc">c. {{ item.optionc }}</el-radio>
              <el-radio label="d" class="topic-option" v-if="item.optiond">d. {{ item.optiond }}</el-radio>
            </el-radio-group>
          </div>
          <div v-else-if="item.qs_type === '判断题'">
            <el-radio-group v-model="ruleForm[index]">
              <el-radio label="正确" class="topic-option">正确</el-radio>
              <el-radio label="错误" class="topic-option">错误</el-radio>
            </el-radio-group>
            <!--            {{ ruleForm[index] === item.qs_right }}-->
          </div>
          <div v-else-if="item.qs_type === '多选题'">
            <!--            {{ ruleForm[index].sort().join(',') === item.qs_right }}-->
            <el-checkbox-group
                v-model="ruleForm[index]"
            >
              <el-checkbox label="a" class="topic-option" v-if="item.optiona">a. {{ item.optiona }}</el-checkbox>
              <el-checkbox label="b" class="topic-option" v-if="item.optionb">b. {{ item.optionb }}</el-checkbox>
              <el-checkbox label="c" class="topic-option" v-if="item.optionc">c. {{ item.optionc }}</el-checkbox>
              <el-checkbox label="d" class="topic-option" v-if="item.optiond">d. {{ item.optiond }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="button-login" style="width:1305px;margin:100px auto;display: flex;justify-content: space-around">
      <my-button @click="nextQuestion" :text="  now === questionList.length - 1 ? '完成' : '下一题' "/>
      <my-button @click="routerGo('question-type')" text="退出答题"/>
    </div>
    <!--    <el-button type="primary" class="qs-button" @click="nextQuestion">-->
    <!--      {{ now === questionList.length - 1 ? '完成' : '下一题' }}-->
    <!--    </el-button>-->
    <!--    <el-button type="primary" class="qs-button" @click="routerGo('question-type')">退出答题</el-button>-->
  </div>
</template>
<script setup lang="ts">
import {reactive, ref, watchEffect} from "vue";
import {useRouter, useRoute} from "vue-router";
import axios from '../utils/http'

const router = useRouter()
const currentRoute = useRoute()
import {useTimer} from 'vue-timer-hook';

const mulQs = '多选题'
import {ElMessage} from 'element-plus'
import _ from "lodash";

function routerGo(path: string) {
  router.push(`/${path}`)
}

const time = new Date();
const countDown = 30
time.setSeconds(time.getSeconds() + countDown); // 10 minutes timer
// @ts-ignore
const timer = useTimer(time);
watchEffect(async () => {
  if (timer.isExpired.value) {
    nextQuestion()
  }
})

let questionList: any[] = reactive([])
let rightResult: any[] = reactive([])
let ruleForm: any[] = reactive([])
let typeWord = ref('')
getTypeWord()

function getTypeWord() {
  let id = currentRoute.query.id
  // @ts-ignore
  let typeList = JSON.parse(sessionStorage.getItem('typeList'))
  // @ts-ignore
  let temp = typeList.find((item) => item.code === id)
  typeWord.value = temp.codeValue
}

getList()

function getList() {
  axios('/api/appliedModule/page', {
    params: {
      bizId: platformConfig.questionId,
      pageSize: 99,
      pageNum: 1,
      searchConditions: `qs_category=` + currentRoute.query.id + ','
    }
  }).then(({data}) => {
    let temp = _.sampleSize(data.data.records, 10)
    //let temp=data.data.records
    temp.forEach((item: any, index: number) => {
      item.num = index
      rightResult.push(item.qs_right)
      questionList.push(item)
    })
    for (let i = 0; i < temp.length; i++) {
      let o: any = temp[i].qs_type === mulQs ? [] : '';
      ruleForm.push(o)
    }
    //  console.log(ruleForm)
  })
}


let now = ref(0)
let allTime = ref(0)
let allRightCount = ref(0)

function pushAnswer() {
  let qs_category = currentRoute.query.id
  //console.log(allTime.value, allRightCount.value)
  axios('/api/application/public/education/ranking', {
    method: 'post',
    data: {
      telephone: sessionStorage.getItem('userPhone'),
      qs_category: qs_category,
      answer_time: allTime.value,
      correct_count: allRightCount.value,
      wrong_count: questionList.length - allRightCount.value,
      score: allRightCount.value * 10,
    }
  }).then(({data}) => {
    if (data.success) {
      routerGo('rankings?id=' + qs_category as string)
    } else {
      ElMessage({
        type: 'error',
        message: data.message
      })
    }

  })
}


function nextQuestion() {
  let result = currentAnswerIsRight()
  if (result) {
    allRightCount.value++
    ElMessage({
      type: 'success',
      message: '回答正确'
    })
  } else {
    ElMessage({
      type: 'error',
      message: '回答错误'
    })
  }
  allTime.value += (countDown - timer.seconds.value)
  const time = new Date();
  time.setSeconds(time.getSeconds() + countDown);
  // @ts-ignore
  timer.restart(time);// @ts-ignore
  if (now.value < questionList.length - 1) {
    now.value++
  } else {
    pushAnswer()
  }
}

function currentAnswerIsRight() {
  let current = questionList[now.value]
  if (current.qs_type === mulQs) {
    return ruleForm[now.value].sort().join(',') === current.qs_right
  } else {
    return ruleForm[now.value] === current.qs_right
  }
}

</script>
<style lang="scss" scoped>
.detail-wrap {
  background: url("../assets/Question/detailbg.png") no-repeat;
  width: 1752px;
  height: 812px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  top: 55%;
  transform: translateY(-50%);

  padding-left: 80px;
  padding-top: 80px;
  padding-right: 80px;

  .qs-header {
    display: flex;
    font-size: 40px;
    font-weight: bold;
    justify-content: space-between;
  }

  .blue-color {
    color: #3458F5
  }

  .topic-title {
    background: #3458F5;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    width: 100px;
    border-radius: 10px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .topic-content {
    box-sizing: border-box;
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
  }

  .topic-option {
    font-size: 40px;
    padding-left: 15px;
    height: 80px;
    width: 1350px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 10px;
    border: 1px solid #cfcfcf;
    margin-top: 20px;
  }

  :deep(.el-radio__label), :deep(.el-checkbox__label) {
    font-size: 30px;
  }

  :deep(.el-radio__inner) {
    width: 30px;
    height: 30px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #409eff;

    &::after {
      width: 15px;
      height: 15px;
    }
  }

  :deep(.el-checkbox__inner) {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #409eff;

    &::after {
      width: 15px;
      height: 15px;
      border-radius: 100%;
      background-color: #fff;
      content: "";
      top: 22%;
      left: 23%;
      transition: transform .15s ease-in;

    }
  }


}

</style>